<template>
  <transition name="slide-down">
    <header class="app-header-wrapper" v-if="show" :style="{height:appHeaderHeight, background: appHeaderBg}">
      <div class="app-header-left">
        <div class="left-arrow-icon" v-if="showBack" @click="goBack"></div>
      </div>
      <div class="app-header-middle" v-cloak>
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div class="app-header-right">
       
      </div>
    </header>
    <header class="app-header-wrapper" v-if="showNavBack" :style="{height:appHeaderHeight, background: appHeaderBg}">
      <div class="app-header-left">
        <div class="left-arrow-icon" v-if="showBack" @click="goBack"></div>
      </div>
      <div class="app-header-middle" v-cloak>
      </div>
      <div class="app-header-right">
      </div>
    </header>
  </transition>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import EventBus from '@/core/event-bus';
  
  export default {
    name: 'appHeader',
    data(){
      return{
      }
    },
    computed: {
      ...mapState('appShell/appHeader', [
        'show',
        'showMenu',
        'showBack',
        'showLogo',
        'logoIcon',
        'title',
        'actions',
        'appHeaderHeight',
        'backActionDelta',
        'appHeaderBg',
        'showNavBack',
        'isIndex'
      ]),
      ...mapState('appShell/common', [
        'isPageSwitching'
      ])
    },
    methods: {
  
      /**
       * 处理按钮点击事件
       *
       * @param {string} source 点击事件源名称 menu/logo/action
       * @param {Object} data 随点击事件附带的数据对象
       */
      handleClick(source, {
        actionIdx,
        route
      } = {}) {
  
        // 页面正在切换中，不允许操作，防止滑动效果进行中切换
        if (this.isPageSwitching) {
          return;
        }
        let eventData = {};
  
        // 点击右侧动作按钮，事件对象中附加序号
        if (source === 'action') {
          eventData.actionIdx = actionIdx;
        }
  
        // 发送给父组件，内部处理
        this.$emit(`click-${source}`, eventData);
  
        // 发送全局事件，便于非父子关系的路由组件监听
        EventBus.$emit(`app-header:click-${source}`, eventData);
  
        // 如果传递了路由对象，进入路由
        if (route) {
          this.$router.push(route);
        }
      },
      goBack(){
        this.$emit('click-back');
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/variable';
  @import '~@/assets/scss/mixins.scss';
  $btn-color: #fff;
  .app-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: $colorHeaderBg;
    color: $btn-color;
    padding: 0 0.1rem;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12);
    transition: transform 0.3s ease-out;
    &.slide-down-enter,
    &.slide-down-leave-to {
      transform: translate(0, -100%);
    }
    &>div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .app-header-middle {
      flex: 1;
      font-size: 1.2em;
      color:#333;
    }
    .left-arrow-icon{
      @include left-arrow(0.12rem, #ccc,0.02rem);
    }
  }
</style>
